<template>
  <!-- <div class="main">
    <div class="header">
      <span style="margin-left: 20px">版本号</span>
      <el-input
        placeholder="请输入关键字"
        v-model="req.code"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          req.pageIndex = 1
          getApps()
        "
      >
        搜索
      </el-button>
      <el-button
        type="success"
        style="margin-left: 20px"
        size="small"
        @click="uploadVis = true"
      >
        上传app
      </el-button>
    </div>
    <el-table
      style="overflow: auto; flex: 0.9"
      :data="res.Items"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="版本">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">当前版本</el-tag>
          {{ scope.row.version_code }}
        </template>
      </el-table-column>
      <el-table-column label="更新内容">
        <template slot-scope="scope">
          {{ scope.row.updateContent }}
        </template>
      </el-table-column>
      <el-table-column label="上传时间">
        <template slot-scope="scope">
          {{ scope.row.uploadTime | formatTime }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="setAppActived(scope.row.version)"
            icon="el-icon-check"
            v-if="scope.row.status == 0"
          >
            启用
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteApp(scope.row.version)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination
        layout="total,prev,pager,next,sizes"
        style="float: right"
        background
        :current-page.sync="req.pageIndex"
        :total="res.Total"
        :page-size="req.pageSize"
        :page-sizes="[10, 15, 20]"
        @size-change="
          (val) => {
            req.pageSize = val
            getApps()
          }
        "
        @current-change="getApps()"
      ></el-pagination>
    </div>
    <el-dialog title="上传app" :visible.sync="uploadVis" width="600px">
      <el-form label-width="100px" style="margin-top: 20px; width: 100%">
        <el-form-item label="版本号">
          <el-input
            placeholder="请输入版本号"
            v-model="version"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="更新内容">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入更新内容"
            v-model="updateContent"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-upload
            :action="fileUploadUrl"
            :on-error="uploadErr"
            multiple
            :data="{ version: version, updateContent: updateContent }"
            :show-file-list="false"
            :headers="myHeaders"
            :on-success="
              (data) => {
                uploadFinish(data)
              }
            "
          >
            <el-button type="default" icon="el-icon-plus">app上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div> -->
</template>
<script setup lang="ts">
import appManagePageApi from '@/api/system/appManage.api'
// import { baseURL, tokenName, empIdName } from '@/config'
//   created: function () {
//     this.getApps()
//     this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
//     this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
//   },
    defineOptions({
      name: "appManagePage",
      inheritAttrs: false,
    });
    onMounted(()=>{
      getApps();    
    })
    let req = reactive({
        code: '',
        pageIndex: 1,
        pageSize: 10,
      }) 
    
    function getApps () {
      appManagePageApi.getApps(req).then( data => {
        // res = data
        console.log(data);
        
      })
    }
    // function uploadErr(err) {
    //   alert(JSON.stringify(err))
    // }
    // function uploadFinish(data) {
    //   if (data.success) {
    //     getApps()
    //     uploadVis = false
    //   } else {
    //     alert(data.errormsg)
    //   }
    // }
    // function deleteApp(id) {
    //   appManagePageApi.deleteApp({ id }).then(() => {
    //     getApps()
    //   })
    // }
    // function setAppActived(id) {
    //   appManagePageApi.setAppActived({ id }).then(() => {
    //     getApps()
    //   })
    // }
// export default {
//   data: function () {
//     return {
//       
//       res: {
//         Items: [],
//         Total: 0,
//       },
//       version: '',
//       updateContent: '',
//       fileUploadUrl: baseURL + 'api/Developer/AppVersion/UploadApp',
//       uploadVis: false,
//       myHeaders: {},
//     }
//   },
//   methods: {

//   },

// }
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  flex-direction: column;
  display: flex;
}
.upload-button {
  width: 50px;
  height: 50px;
  background-color: #f3f3f3;
  font-size: 16px;
  color: #5f85f6;
  margin-left: 16px;
  margin-top: 10px;
}
</style>
